<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备管理 - SmartUI Studio</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/notification.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/device.css') }}">
</head>
<body>
    <!-- 顶部标题栏 -->
    <header class="header">
        <div class="header-left">
            <button class="btn menu-btn" title="菜单">
                <i class="bi bi-grid-3x3-gap-fill"></i>
            </button>
            <button class="btn home-btn" title="首页" onclick="window.location.href='/'">
                <img src="{{ url_for('static', filename='img/logo.svg') }}" alt="SmartUI Studio" class="logo">
                <span>SmartUI Studio</span>
            </button>
            <div class="device-path">
                <span class="separator"></span>
                <span class="path">{{ device.name }}</span>
            </div>
        </div>
        <div class="header-right">
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="permissionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-shield-lock"></i>
                    <span>权限管理</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="permissionDropdown">
                    <li><a class="dropdown-item" href="#">用户管理</a></li>
                    <li><a class="dropdown-item" href="#">角色管理</a></li>
                    <li><a class="dropdown-item" href="#">权限设置</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="helpDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-question-circle"></i>
                    <span>帮助</span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="helpDropdown">
                    <li><a class="dropdown-item" href="#">使用指南</a></li>
                    <li><a class="dropdown-item" href="#">API文档</a></li>
                    <li><a class="dropdown-item" href="#">关于</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="notificationDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <ul class="dropdown-menu notification-menu" aria-labelledby="notificationDropdown">
                    <li><a class="dropdown-item" href="#">测试完成: 项目1</a></li>
                    <li><a class="dropdown-item" href="#">设备连接成功: 设备2</a></li>
                    <li><a class="dropdown-item" href="#">新报告生成</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{{ url_for('static', filename='img/avatar.svg') }}" alt="用户头像" class="avatar">
                </button>
                <ul class="dropdown-menu" aria-labelledby="userDropdown">
                    <li><a class="dropdown-item" href="#">个人资料</a></li>
                    <li><a class="dropdown-item" href="#">设置</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="device-container">
        <!-- Shell 终端 -->
        <div class="shell-panel">
            <div class="panel-header">
                <h5>Shell 终端</h5>
                <div class="panel-actions">
                    <button class="btn btn-sm btn-outline-secondary" title="清空">
                        <i class="bi bi-trash"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" title="复制">
                        <i class="bi bi-clipboard"></i>
                    </button>
                </div>
            </div>
            <div class="terminal-container">
                <div class="terminal-output" id="terminalOutput">
                    <div class="terminal-line">OpenHarmony Device Shell v1.0</div>
                    <div class="terminal-line">连接到设备: {{ device.name }} ({{ device.ip }})</div>
                    <div class="terminal-line">类型: {{ device.type }}</div>
                    <div class="terminal-line">状态: {{ device.status }}</div>
                    <div class="terminal-line">输入 'help' 获取可用命令列表</div>
                    <div class="terminal-line prompt">device:/$</div>
                </div>
                <div class="terminal-input-container">
                    <span class="prompt">device:/$</span>
                    <input type="text" class="terminal-input" id="terminalInput" placeholder="输入命令...">
                </div>
            </div>
            <div class="terminal-toolbar">
                <div class="btn-group">
                    <button class="btn btn-sm btn-outline-primary" id="installBtn">
                        <i class="bi bi-download"></i> 安装应用
                    </button>
                    <button class="btn btn-sm btn-outline-primary" id="uninstallBtn">
                        <i class="bi bi-trash"></i> 卸载应用
                    </button>
                    <button class="btn btn-sm btn-outline-warning" id="flashBtn">
                        <i class="bi bi-device-hdd"></i> 烧录镜像
                    </button>
                </div>
            </div>
        </div>

        <!-- 设备桌面 -->
        <div class="device-screen-panel">
            <div class="panel-header">
                <h5>设备桌面</h5>
                <div class="panel-actions">
                    <button class="btn btn-sm btn-outline-secondary" title="刷新">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" title="截图">
                        <i class="bi bi-camera"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" title="录制">
                        <i class="bi bi-record-circle"></i>
                    </button>
                </div>
            </div>
            <div class="device-frame">
                <div class="device-status-bar">
                    <div class="status-left">
                        <span>9:41</span>
                    </div>
                    <div class="status-right">
                        <i class="bi bi-wifi"></i>
                        <i class="bi bi-reception-4"></i>
                        <i class="bi bi-battery-full"></i>
                    </div>
                </div>
                <div class="device-content">
                    <div class="device-home">
                        <!-- 模拟设备桌面 -->
                        <div class="app-grid">
                            <div class="app-icon">
                                <i class="bi bi-telephone"></i>
                                <span>电话</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-chat"></i>
                                <span>信息</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-camera"></i>
                                <span>相机</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-image"></i>
                                <span>相册</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-calendar"></i>
                                <span>日历</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-clock"></i>
                                <span>时钟</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-map"></i>
                                <span>地图</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-music-note-beamed"></i>
                                <span>音乐</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-gear"></i>
                                <span>设置</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-shop"></i>
                                <span>应用商店</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-browser-chrome"></i>
                                <span>浏览器</span>
                            </div>
                            <div class="app-icon">
                                <i class="bi bi-calculator"></i>
                                <span>计算器</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="device-navigation">
                    <button class="nav-btn"><i class="bi bi-arrow-left"></i></button>
                    <button class="nav-btn"><i class="bi bi-house"></i></button>
                    <button class="nav-btn"><i class="bi bi-list"></i></button>
                </div>
            </div>
            <div class="device-info">
                <div class="info-item">
                    <span class="info-label">设备名称:</span>
                    <span class="info-value">{{ device.name }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">IP地址:</span>
                    <span class="info-value">{{ device.ip }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">设备类型:</span>
                    <span class="info-value">{{ device.type }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">状态:</span>
                    <span class="info-value status-badge {{ 'status-online' if device.status == 'online' else 'status-offline' }}">{{ device.status }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框 -->
    <!-- 安装应用模态框 -->
    <div class="modal fade" id="installModal" tabindex="-1" aria-labelledby="installModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="installModalLabel">安装应用</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="appFile" class="form-label">选择应用文件 (.apk)</label>
                            <input class="form-control" type="file" id="appFile" accept=".apk">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmInstall">安装</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 卸载应用模态框 -->
    <div class="modal fade" id="uninstallModal" tabindex="-1" aria-labelledby="uninstallModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uninstallModalLabel">卸载应用</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="appPackage" class="form-label">应用包名</label>
                            <input type="text" class="form-control" id="appPackage" placeholder="com.example.app">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmUninstall">卸载</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 烧录镜像模态框 -->
    <div class="modal fade" id="flashModal" tabindex="-1" aria-labelledby="flashModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="flashModalLabel">烧录镜像</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="imageFile" class="form-label">选择镜像文件 (.img)</label>
                            <input class="form-control" type="file" id="imageFile" accept=".img">
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="wipeData">
                                <label class="form-check-label" for="wipeData">
                                    清除所有数据
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-warning" id="confirmFlash">烧录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本引用 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/device.js') }}"></script>
</body>
</html>